<!--
 * @Description: mark
 * @Author: wangwangwang
 * @Date: 2020-07-23 09:33:47
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-09-11 16:23:04
--> 
<template>
	<el-dialog v-dialogDrag :visible.sync="childVisible" width="50%">
		<span slot="title">选择子流程</span>
		<div class="dialoginfo" style="border:0">
			<div class="subprocesses">
				<el-form ref="form" :model="form" label-width="90px">
					<div style="display: flex;justify-content: space-between;">
						<el-form-item label="触发类型：">
							<el-select v-model="form.execteType" placeholder="请选择">
								<el-option label="自动触发" value="1"></el-option>
								<el-option label="手动触发" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="触发时间：">
							<el-select v-model="form.execteTime" placeholder="请选择">
								<el-option label="离开节点" value="2"></el-option>
								<el-option label="到达节点" value="1"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<el-form-item label="触发操作：">
						<el-select v-model="form.executeHandler" placeholder="请选择">
							<el-option label="同意" value="1"></el-option>
							<el-option label="不同意" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="子流程：">
						<el-select v-model="form.id" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<div style="border: 1px #e1e5ed solid;">
						<el-form-item label-width="20px">
							<el-radio-group v-model="form.processMode">
								<div style="padding: 10px 0;">
									<el-radio label="1">启动子流程后父流程照常流转</el-radio>
								</div>
								<div>
									<el-radio label="2"><span>必须子流程办结后父流程才能继续流转</span></el-radio>
								</div>
							</el-radio-group>
						</el-form-item>
					</div>
					<el-form-item label-width="20px" style="margin-top: 20px;">
						<el-checkbox v-model="form.executeStatus">是否开启</el-checkbox>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button class="bottom_all_two" size="medium" @click="handleClose">取 消</el-button>
			<el-button class="bottom_all" size="medium" @click="sureSubmit">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { getFlowsList } from '@/api/Signed/flows';
export default {
	props: ['childVisible', 'childEditData'],
	data() {
		return {
			form: {
				execteType: '1',
				execteTime: '1',
				executeHandler: '1',
				id: '',
				processMode: '1',
				executeStatus: true,
			},
			loading: false,
			options: [],
		}
	},
	methods: {
		handleClose() {
			this.$emit('closeVisible');
		},
		sureSubmit() {
			if (!this.form.id) {
				this.$message({
					type: 'warning',
					message: '请选择子流程后提交',
				})
				return
			}
			this.$emit('sendChildData', this.form);
		},
		remoteMethod(value) {
			const params = {
				name: value,
				page: 1,
				pageSize: 1000,
			}
			this.loading = true;
			getFlowsList(params).then(res => {
				this.loading = false;
				if (res.code === 1001) {
					const newArry = res.data.data.filter((item) => {
						return item.processType === 2
					});
					this.options = newArry;
				}
			})

			console.log(value)
		}
	},
	mounted() {
		if (this.childEditData) { // 存在时为编辑数据
			this.form = this.childEditData;
		}
	}
}
</script>

<style lang="scss" scoped>
.subprocesses {
  .el-select {
    width: 200px;
  }
}
</style>
